.comment-form {
  background-color: #fafbfc;
  border-radius: 3px;
  padding: 12px 16px;

  .form-left {
    float: left;
    width: 32px;

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;

      img {
        @include imgFit();
      }
    }

    .user-info {
      margin-top: 8px;
      width: 32px;
      text-align: center;

      .logout-btn {
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 4px;
        color: #fff;
        background-color: #F36262;
        text-decoration: none;

        &:hover {
          opacity: .7;
        }

        &:active {
          opacity: 9;
        }

        .icon {
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }


  .form {
    margin-left: 44px;

    .form-top {
      .row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin: 0 -5px;

        .col {
          width: 150px;
          flex-grow: 1;
          padding: 0 5px;
          margin-bottom: 10px;
        }
      }

      .item {
        input {
          display: block;
          width: 100%;
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          padding: 3px 5px;
          color: #17181a;
          background-color: #fff;
          border: 1px solid #f1f1f1;
          border-radius: 3px;
          outline: none;

          &::placeholder {
            color: rgba(23, 24, 26, 0.4);
          }
        }
      }

    }

    .form-bottom {
      .textarea-warp {
        margin-bottom: 10px;

        textarea {
          display: block;
          width: 100%;
          min-height: 80px;
          font-size: 14px;
          padding: 5px;
          color: #17181a;
          background-color: #fff;
          border: 1px solid #f1f1f1;
          border-radius: 3px;
          outline: none;
          resize: vertical;

          &::placeholder {
            color: rgba(23, 24, 26, 0.4);
          }
        }
      }
    }

    //评论工具
    .form-tool {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .tool-left {
        @import "../face/face";
      }

      .form-btn {
        font-size: 15px;
        color: #fff;
        padding: 6px 16px;
        background-color: #007fff;
        border-radius: 2px;
        border: none;
        cursor: pointer;

        &.submit {
          background-color: rgba(3, 113, 223, .4);
        }

        &:hover,
        &:active {
          opacity: .7;
        }
      }

      .reply-btn {
        margin-right: 10px;

        .form-btn {
          color: rgba(23, 24, 26, .4);
          background-color: #ebebeb;
        }
      }
    }

    //每个表单元素的验证样式
    //失败
    input,
    textarea {
      &[required]:not(:placeholder-shown) {
        border-color: #f73131;
      }
    }

    //成功
    input,
    textarea {
      &[required]:valid {
        border-color: #007fff;
      }
    }

    //整个表单验证通过
    &:valid {
      .form-bottom .form-tool .submit {
        background-color: #027fff;
      }
    }

  }
}